<style>
    /*login 弹框*/
    /* #login.el-dialog__wrapper{background:#fff;} */
    #login.el-dialog__wrapper .el-dialog.el-dialog--small{width:32%;height:300px;}
    .check_code .el-input.el-input--small{width:45%;float:left;}
    .check_code_img{vertical-align:middle;}
    #loginBtn .el-form-item__content{margin-left:0!important;}
    #loginBtn .el-form-item__content .el-button{width:60%;}

</style>

<template>
    <div id="app">
        <!--登录框-->
        <el-dialog id="login" title="用户登录" :visible.sync="loginFlag" :closeOnClickModal="false" size="tiny" :showClose="false" :close-on-press-escape="false">
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="70px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name" id="name">
                    <el-input size="small" type="text" v-model="loginForm.name" auto-complete="off" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密 码" prop="pass" id="pass">
                    <el-input size="small" onfocus="this.type='password'" type="password" v-model="loginForm.pass" auto-complete="off" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item class="check_code" label="验证码" prop="checkCode" id="checkCode">
                    <el-input size="small" v-model="loginForm.checkCode" auto-complete="off" placeholder="验证码" @blur="handleCheckCodeBlur()"></el-input>
                    <img class="check_code_img" v-bind:src="checkCodeImgSrc" alt="验证码" title="点击刷新验证码" @click="reloadCheckCodeImg()">
                </el-form-item>
                <el-form-item id="loginBtn">
                    <el-button size="small" type="primary" @click="loginSubmit()">登录</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    export default  {
        data () {
            //登录相关信息的验证
            var validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                }else{
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
            var validateCheckCode = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('验证码不能为空'));
                }else{
                    callback();
                }
            };
            return {
                loginFlag:true,
                //登录
                loginForm: {
                    name: "",
                    pass: "",
                    checkCode: ""
                },
                formName:"loginForm",   //登录时需要验证的表单
                loginRules: {
                    name: [
                        { validator: validateName, trigger: 'blur' }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkCode: [
                        { validator: validateCheckCode, trigger: 'blur' }
                    ]
                },
                checkCodeImgSrc:"/",        //验证码的图片路径
                leftMenu:"",    //左侧菜单
                actived:"managementUnit",

                // language: this.$language,
                //左侧菜单权限
                powerFlag:{},
                isSuccessLogin:false//是否登录成功
            }
        },
        computed:{
            powerData(){
                return this.$store.state.powerData;
            }
        },
        // created() {
        // 	// Acceptance speech signal change
        // 	this.$on('language', type => {
        // 		this.language = type
        // 	})
        // },
        /*created:function(){
         var _this=this;
         _this.isLogin();  //判断是否登录
         },*/
        mounted:function(){
            var _this=this;
            _this.$store.commit('currentActive', 'Login');
            $('body,html').animate({ scrollTop: 0 }, 100);   //返回顶部
            // 左侧菜单权限
            for(var i=0;i<_this.powerData.length;i++){
                var key=_this.powerData[i];
                _this.powerFlag[key]=true;
            }
            // 验证码的src
            _this.checkCodeImgSrc=_this.metadata_service+"security/captchaImage.jpg";
            

            // 获取当前url  判断当前应该活动的菜单
            _this.urlName=window.location.hash.slice(2);
            _this.actived=_this.urlName;    // 当前活动菜单
            //  _this.changeLanguage(type);

            //点击回车登录
            $("body").keydown(function() {
                if(_this.loginFlag){
                    if (event.keyCode == "13") {//keyCode=13是回车键
                        _this.isSuccessLogin=true;//是否登录成功
                        _this.loginSubmit();
                    }
                }
            });
        },
        methods: {
            // //中英文切换
            // changeLanguage(type,event){
            //     var _this=this;
            //     $(".footer-tools .nav-lang").removeClass("active");
            //     $(event.toElement).addClass("active");
            //     // this.$root.$broadcast('language',type)
            //     // this.$dispatch('language',type)

            //     // _this.$store.commit('languageType',type);

            //     // if(type=='en'){
            //     //     Vue.locale('en', ELEMENT.lang.en)
            //     // }else if(type == 'zh'){
            //     //     Vue.locale('zh-cn', ELEMENT.lang.zhCN)
            //     // }


            // },

            //重新请求验证码图片
            reloadCheckCodeImg(){
                var _this=this;
                _this.checkCodeImgSrc=_this.metadata_service+"security/captchaImage.jpg?d="+Math.random();
            },
            // 失去焦点时，发送请求检查输入的验证码是否正确
            handleCheckCodeBlur(){
                var _this=this;
                if(!_this.isSuccessLogin){
                    $.ajax({
                        type: 'GET',
                        url: _this.metadata_service+"security/captchaImage.jpg/"+_this.loginForm.checkCode,
                        cache: false,
                        success: function (data) {
                            if (data.success) {
                                // console.log("验证码输入正确");
                                // _this.common.successTip("验证码输入正确");
                            }else{
                                _this.common.errorTip(data.errorMessage);
                            }
                        }
                    });
                }
            },
            //登录
            login(){
                var _this=this;
                var tmp={"userName": _this.loginForm.name, "password": _this.loginForm.pass, "captcha":_this.loginForm.checkCode};
                _this.common.successTip("登录成功");
                _this.$router.push({path: '/Main'})
                /*$.ajax({
                    type: 'POST',
                    url: "http://127.0.0.1:18082/login",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",     //!*****
                    success: function (data) {
                        if (data.success) {
                            //登陆成功,关闭弹窗
                            _this.common.successTip("登录成功");
                            _this.$router.push({path: '/Main'})
                        }else{
                            // _this.common.errorTip(data.errorMessage);
                            // _this.reloadCheckCodeImg();
                            _this.common.successTip("登录成功");
                            _this.$router.push({path: '/Main'})
                        }
                    }
                });*/
            },
            //提交
            loginSubmit() {
                var _this=this;
                _this.$refs[_this.formName].validate((valid) => {
                    if (valid) {
                        _this.login();
                    } else {
                        _this.common.errorTip("存在未填写的必填项！");
                        return false;
                    }
                });
            },
            // 不带icon 菜单
            handleOpen(key, keyPath) {
                //console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            }
        }
    }
</script>


